<template>
    <div class="componentList" 
       @dragstart="handleDragStart" >
       <div 
         draggable
       v-for="(item,index) in componentList" 
       :key="index" class="list" 
       :style = "item.style" :data-index="index">
           <span>{{ item.label }}</span>
       </div>
    </div>
</template>
    <script>
    
    import componentList from '@/custom-component/component-list'
    export default {
      name: 'ComponentList',
      components: {
        
      },
      data(){
          return {
            componentList
          }
      },
      methods: {
        handleDragStart(e){
            e.dataTransfer.setData('index',e.target.dataset.index)
        }
      },
    }
    </script>
    
    <style lang="scss" scoped>
        .componentList{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .list{
                width: 40%;
                text-align:center;
                align-items:center;
                justify-content:center
            }
        }
    </style>
    